<script setup>
import {reactive, ref} from 'vue';

/* data  */
const searchForm = reactive({
  task: 3,
  category: "",
})
const categoryOptions = reactive([
  {
    value: 1,
    label: "黄金糕"
  },
  {
    value: 2,
    label: "双皮奶"
  },
  {
    value: 3,
    label: "龙须面"
  },
  {
    value: 4,
    label: "烤鸭"
  }
])
const tableData = ref([
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    status: 1,
  },
  {
    date: '2016-05-02',
    name: 'yuan',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 190, Grove St, Los Angeles',
    zip: 'CA 90036',
    status: 2,
  },
  {
    date: '2016-05-03',
    name: 'alex',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 191, Grove St, Los Angeles',
    zip: 'CA 90036',
    status: 1,
  },
  {
    date: '2016-05-04',
    name: 'alvin',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 192, Grove St, Los Angeles',
    zip: 'CA 90036',
    status: 2,
  },
  {
    date: '2016-05-05',
    name: 'peiqi',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 193, Grove St, Los Angeles',
    zip: 'CA 90036',
    status: 1,
  },
])
const dialogVisible = ref(false);

const searchFormRef = ref()

/* function  */
function handleClick(row) {
  dialogVisible.value = true;
  console.log(row);
}

function confirmDelete(row) {
  console.log("confirm", row);
}

function handleCurrentChange(page) {
  console.log("查看页数", page);
}

function handleSelectionChange(val) {
  console.log(val);
}

</script>

<template>
  <div style="padding: 20px">
    <!--头部-->
    <el-card class="box-card">
      <el-form :inline="true" class="demo-form-inline" size="small" :model="searchForm" ref="searchFormRef">
        <el-form-item label="当前任务" style="width: 200px;margin-bottom: 0" prop="category">
          <el-select v-model="searchForm.task" placeholder="全部任务">
            <el-option v-for="item in categoryOptions" :key="item.value" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="推广码" style="width: 200px;margin-bottom: 0" prop="category">
          <el-select v-model="searchForm.category" placeholder="全部">
            <el-option v-for="item in categoryOptions" :key="item.value" :label="item.label"
                       :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </el-card>
    <div style="position: relative">
      <!--操作标签-->
      <div style="position: absolute;right:12px;top:8px;z-index: 100">
        <el-input size="small" style="width: 100px;margin-right: 10px" placeholder="请输入内容">
          <template #suffix><el-icon><Search /></el-icon></template>
        </el-input>
        <el-button size="small" type="primary">导入</el-button>
        <el-button size="small" type="primary">移入黑名单</el-button>
        <el-button size="small" type="primary">移除黑名单</el-button>
      </div>
      <!--表头-->
      <el-row style="margin-top: 20px;width: 100%">
        <el-tabs type="border-card" style="width: 100%;">
          <el-tab-pane label="参与用户">
            <!--列表表格-->
            <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="date" label="日期"></el-table-column>
              <el-table-column prop="name" label="姓名"></el-table-column>
              <el-table-column prop="address" label="地址"></el-table-column>
              <el-table-column label="状态">
                <template #default="scope">
                  <el-tag v-if="scope.row.status===1" type="success">成功</el-tag>
                  <el-tag v-else type="danger">失败</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                  <el-popconfirm title="确定要删除吗？" @confirm="confirmDelete(scope.row)">
                    <template #reference>
                      <el-button type="text" size="small">删除</el-button>
                    </template>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
            <!--分页-->
            <div>
              <el-row justify="end" style="margin-top: 16px">
                <el-pagination background layout="prev, pager, next,jumper" :total="1000"
                               @current-change="handleCurrentChange"/>
              </el-row>
            </div>
          </el-tab-pane>
          <el-tab-pane label="黑名单">
            <!--列表表格-->
            <el-table :data="tableData" style="width: 100%" border>
              <el-table-column prop="date" label="日期"></el-table-column>
              <el-table-column prop="name" label="姓名"></el-table-column>
              <el-table-column prop="address" label="地址"></el-table-column>
              <el-table-column label="状态">
                <template #default="scope">
                  <el-tag v-if="scope.row.status===1" type="success">成功</el-tag>
                  <el-tag v-else type="danger">失败</el-tag>
                </template>
              </el-table-column>
              <el-table-column label="操作">
                <template #default="scope">
                  <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                  <el-popconfirm title="确定要删除吗？" @confirm="confirmDelete(scope.row)">
                    <template #reference>
                      <el-button type="text" size="small">删除</el-button>
                    </template>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table>
            <!--分页-->
            <div>
              <el-row justify="end" style="margin-top: 16px">
                <el-pagination background layout="prev, pager, next,jumper" :total="1000"
                               @current-change="handleCurrentChange"/>
              </el-row>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </div>
  </div>
</template>

<style scoped>

</style>